<template>
    <div id="container">
        <div id="first" @click="click" :data-key="1">
            <div>推时间</div>
            <div>推评分</div>
            <div>喜欢数</div>
            <div>新上线</div>
        </div>
        <div id="second" @click="click" :data-key="1">
            <div>全部地区</div>
            <div>华语</div>
            <div>港台</div>
            <div>日韩</div>
            <div>东南亚</div>
            <div>美国</div>
            <div>其他</div>
        </div>
        <div id="third" @click="click" :data-key="1">
            <div>全部类型</div>
            <div>喜剧</div>
            <div>爱情</div>
            <div>动作</div>
            <div>恐怖</div>
            <div>动画</div>
            <div>其他</div>

        </div>
        <div id="forth" @click="click" :data-key="1">
            <div>全部年份</div>
            <div>现在-2020</div>
            <div>2020-2010</div>
            <div>2009-2000</div>
        </div>
        <div id="fifth" @click="click" :data-key="1">
            <div>全部方式</div>
            <div>可跳转</div>
            <div>下载链接</div>
            <div>仅推荐</div>
        </div>
    </div>

</template>

<script>

export default {
  data () {
    return {
    };
  },

  components: {},

  computed: {},
  methods: {
    click(e){
        let element = e.target
        console.log(element);
        console.log(element.dataset);
        let {key}=element.dataset
        console.log(key);
        if(key!="1"){
        $(e.target).css({"border": "#FABD93 solid 0.01rem",
        "border-radius":"0.25rem",
        "color":"#FD9044",})
        $(e.target).siblings().css({"border": "0rem",
        "border-radius":"0.25rem",
        "color":"#A0A0A0"})

        }
        
    }
    }
  }


</script>
<style lang='less' scoped>
div{
    font-family: "Adobe Heiti Std";
    color:#A0A0A0;
    font-size: 0.26rem;
}
#container{
    margin-top:0.5rem;
    margin-left: 0.5rem;
}
#first{
    div:first-child{
        border: #FABD93 solid 0.01rem;
        border-radius:0.25rem;
        color:#FD9044;
    }
    div{
        padding:0.1rem 0.3rem;
        display: inline-block;
        line-height: 0.3rem;
        margin-right: 0.21rem;
        
    }
    margin-bottom: 0.4rem;
}
#second{
    overflow-x: scroll; -webkit-overflow-scrolling:touch;display: -webkit-box;white-space: nowrap;
    margin-bottom: 0.4rem;
    div:first-child{
        border: #FABD93 solid 0.01rem;
        border-radius:0.25rem;
        color:#FD9044;
    }
    div{
        line-height: 0.3rem;
        display: inline-block;
        padding:0.1rem 0.22rem;
    }
}
#third{
    overflow-x: scroll; -webkit-overflow-scrolling:touch;display: -webkit-box;white-space: nowrap;
    margin-bottom: 0.4rem;
    div:nth-child(2){
        border: #FABD93 solid 0.01rem;
        border-radius:0.25rem;
        color:#FD9044;
    }
    div{
        line-height: 0.3rem;
        display: inline-block;
        padding:0.1rem 0.23rem;
    }
}
#forth{
    overflow-x: scroll; -webkit-overflow-scrolling:touch;display: -webkit-box;white-space: nowrap;
    margin-bottom: 0.4rem;
    div:nth-child(2){
        border: #FABD93 solid 0.01rem;
        border-radius:0.25rem;
        color:#FD9044;
    }
    div{
        display: inline-block;
        line-height: 0.3rem;
        padding:0.1rem 0.22rem;
    }
}
#fifth{
    margin-bottom: 0.5rem;
    div:nth-child(1){
        border: #FABD93 solid 0.01rem;
        border-radius:0.25rem;
        color:#FD9044;
    }
    div{
        display: inline-block;
        line-height: 0.3rem;
        padding:0.1rem 0.33rem;
    }
}


</style>